<template>
  <div>
    <el-button @click="form={};dialogVisible=true">增加</el-button>
    <el-table :data="tableDate">
      <el-table-column label="桌号" prop="table_no"></el-table-column>
      <el-table-column label="二维码" prop="qr_code">
        <template slot-scope="scope">
          <div class="ratio ratio-1x1" style="width: 5rem;">
            <img :src="scope.row.url">
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="danger" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :title="form.id?'编辑':'新增'" :visible.sync="dialogVisible">
      <el-form ref="form" :model="form" style="padding: 1rem">
        <el-form-item label="桌号">
          <el-input v-model="form.table_no"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">确定</el-button>
          <el-button type="primary" @click="onCancel">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import {ConfigApi, QrCodeApi} from "@/api/api";
import {deleteJson, getJson, postJson, putJson} from "@/api/http";

export default {
  name: "QrcodeComponent",
  data() {
    return {
      tableDate: [],
      QrCodeApi,
      form: {},
      dialogVisible: false,
    }
  },
  methods: {
    async init() {
      let res = await getJson(QrCodeApi + "/" +  0, {})
      this.tableDate = res.data
    },
    async onSubmit() {
      let response;
      if (this.form.id) {
        response = await putJson(ConfigApi + "/" + this.form.id, this.form)
      } else {
        response = await postJson(ConfigApi + "/" + this.form.id, this.form)
      }
      if (response.code === 1) {
        this.dialogVisible = false
        // this.$message.info("操作成功")
        this.$message.success('操作成功');
        await this.init()
      }
    },
    handleEdit(row) {
      this.form = row
      this.dialogVisible = true
    },
    async handleDelete() {
      let response = await deleteJson(QrCodeApi + '/' + this.form.id);
      if (response.code !== 1) {
        this.$message.error(response.data);
      }
    },
    onCancel() {
      this.dialogVisible = false
    },
  },
  created() {
    this.init()
  }
}
</script>

<style scoped>

</style>